<template>
    <div id="wrap">
			<div id="top_content">
					<div id="header">
						<div id="rightheader">
							<p>
								2009/11/20
								<br />
							</p>
						</div>
						<div id="topheader">
							<h1 id="title">
								<a href="#">main</a>
							</h1>
						</div>
						<div id="navigation">
						</div>
					</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						login
					</h1>
						<table cellpadding="0" cellspacing="0" border="0"
							class="form_table">
							<tr>
								<td valign="middle" align="right">
									用户名:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="name" v-model="name" placeholder="请在这里输入用户名"/>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									密码:
								</td>
								<td valign="middle" align="left">
									<input type="password" class="inputgri" name="password"  v-model="password" placeholder="请在这里输入密码"/>
								</td>
							</tr>
						</table>
						<p>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--							<input type="submit" class="button" value="  登  录  " @click="u_login"/>-->
                            <el-button  plain type="success" @click="u_login">登录</el-button>
							&nbsp;&nbsp;
<!--                            <router-link to="/register">注册</router-link>-->
                            <el-button type="warning"><router-link to="/register">注册</router-link></el-button>
						</p>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
					ABC@126.com
				</div>
			</div>
		</div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return{
                name:"",
                password:"",
            }
        },
        methods:{
            u_login(){
                //发axios请求,验证用户名和密码是否正确
                this.$axios({
                    url:"http://127.0.0.1:8000/api/login/",
                    method:"post",
                    data:{
                        l_name:this.name,
                        l_password:this.password
                    }
                }).then(res=>{
                    //登录成功的话,把状态存在session中,便于强制登录的使用,建议使用session,再做合理很符合要求
                    //需要注意的是,sessionstorage的默认周期是一个标签页,不同标签页不能共用,所以此时还是用local好一点,就是麻烦一点
                    console.log(res.data);
                    if(res.data.status["message"]){
                        sessionStorage.setItem("user",this.name)
                        console.log('这是经过校验之后的返回值,登录成功')
                        this.$notify({
                          title: '成功',
                          message: '登录成功',
                          type: 'success'
                        });
                        //登录成功跳转至主页面
                        this.$router.push("/emplist?name="+this.name)
                    }
                    else{
                        console.log('这是经过校验之后的返回值,登录失败')
                        console.log(error)
                        // alert('信息校验失败')  //之后用ui修改框样式
                        this.$notify({
                          title: '警告',
                          message: '登录失败',
                          type: 'warning',
                          position: 'top-left'
                        });
                    }
                }).catch(error=>{
                    console.log(error);
                    // alert('用户名或密码错误')
                    this.$notify({
                          title: '警告',
                          message: '用户名或密码错误,请重新输入',
                          type: 'warning',
                          position: 'top-left'
                        });
                })
            }
        }
    }
</script>

<style scoped>


</style>
